<script setup>
import {
	ref,
	onMounted
} from 'vue'
import {
	onShow,
	onReachBottom
} from '@dcloudio/uni-app'
const keywords = ref('')
const movieCount = ref(0)
onMounted(() => {
	fetchMovieCount()
})
const fetchMovieCount = async () => {
	const db = uniCloud.database()
	const res = await db.collection('movies').count()
	movieCount.value = res.result.affectedDocs
}
const search = () => {
		uni.navigateTo({
			url:'/pages/search/searchList?keywords=' + keywords.value
		})
	}
</script>
<template>
	<image
	  src="/static/logo2.png" 
	  mode="widthFix" 
	  style="position:absolute;top:100rpx;left:50%;transform:translateX(-50%);width:400rpx;"
	></image>
	<view class="search">
		<text class="lg text-gray cuIcon-search search-icon"></text>
		<input type="text" v-model="keywords" placeholder="输入影名进行搜索" @keyup.enter="search" confirm-type="search" @confirm="search" />
	</view>
	<view class="margin-top text-center text-drab">该站已收录{{movieCount}}条资源</view>
</template>

<style lang="scss">

.search{
	position: relative;
	margin: 500rpx 40rpx 0;
	background-color: #fff;
	height: 48px;
	// border-radius: 12px;
	box-shadow: 0 1px 6px 0 #20212425;
	.selectBox{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 90px;
	}
	input{
		text-align: left;
		height: 100%;
		padding:0 100rpx;
	}
	.iconfont{
		position: absolute;
		top: 10px;
		right: 25px;
		font-size: 18px;
	}
	&.noSelect{
		.selectBox{
			display: none;
		}
		input{
			padding: 0 80px 0 24px;
		}
	}
}
.search-icon {
	position: absolute;
	top: 50%;
	left: 50rpx;
	transform: translateY(-50%);
}
</style>